<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-row :gutter="48">
          <a-col :md="formItemCol" :sm="24">
            <a-form-item label="场景关键字">
              <a-input placeholder="请输入场景关键字" v-decorator="['name']" />
            </a-form-item>
          </a-col>

          <a-col :md="formItemCol" :sm="24">
            <a-form-item label="选择品牌">
              <a-select
                v-decorator="['weId']"
                placeholder="请选择品牌"
                @change="handleSelectChange"
              >
                <a-select-option :value="item.weid" v-for="item in brand" :key="item.weid">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="formItemCol" :sm="24">
            <a-form-item label="选择类型">
              <a-select v-decorator="['manageType']" placeholder="选择类型" @change="handleSelectChange">
                <a-select-option value="直营">
                  直营
                </a-select-option>
                <a-select-option value="经销">
                  经销
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="formItemCol" :sm="24">
            <a-form-item label="选择状态">
              <a-select v-decorator="['status']" placeholder="请选择状态">
                <a-select-option value="N">
                  不可用
                </a-select-option>
                <a-select-option value="Y">
                  可用
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :md="formItemCol" :sm="24">
            <a-form-item label="门店编码">
              <a-input placeholder="请输入门店编码" v-decorator="['code']" />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24" class="btn-group">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" html-type="submit">查询</a-button>
              <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div>
      <a-button type="primary" icon="plus" @click="addStore">新增</a-button>
    </div>
    <div style="margin-top:20px">
      <a-table
        :scroll="{ x: '100%' }"
        :rowKey="record => record.code"
        :columns="columns"
        :data-source="list"
        bordered
        :loading="loading"
        :pagination="false"
      >
        <img v-if="qnurl !== ''" slot="qnurl" slot-scope="qnurl" :src="qnurl" class="qrcode" @click="preview(qnurl)" />
        <span slot="status" slot-scope="status">{{ status == 'N' ? '不可用' : '可用' }}</span>
        <template slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="editAction(record)">编辑</a>
          <a slot="action" v-if="record.qnurl == ''" class="ml-10" href="javascript:;" @click="genCode(record.qrCodeId)"
            >生成二维码</a
          >
          <a href="javascript:;" class="ml-10" @click="showDeleteConfirm(record.code)">删除</a>
        </template>
      </a-table>
      <a-pagination style="margin-top:20px" v-model="current" show-size-changer :page-size.sync="size" :total="total" />
    </div>
    <div v-if="showAdd">
      <add-store :visible="true" :editInfo="editInfo" @close="closeAdd"></add-store>
    </div>

    <a-modal :visible="showPreview" title="二维码" @ok="colsePreview" @cancel="colsePreview">
      <div class="center">
        <img :src="previewUrl" class="preview-img" alt="" />
      </div>
    </a-modal>
    <a-modal v-model="showDelete" title="提示信息" @ok="deleteStore" @cancel="closeDetele">
      <p>确定要删除吗？</p>
    </a-modal>
  </a-card>
</template>
<script>
import { storeList, generateQrCode, deleteStore } from '@/api/micromall'
import addStore from './addStore.vue'
const columns = [
  {
    title: '品牌',
    dataIndex: 'brand',
    width: 120,
    align: 'center'
  },
  {
    title: '门店编码',
    width: 100,
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '门店类型',
    width: 120,
    align: 'center',
    dataIndex: 'manageType'
  },
  {
    title: '门店名称',
    width: 300,
    align: 'center',
    dataIndex: 'name'
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '所属城市',
    width: 120,
    align: 'center',
    dataIndex: 'city'
  },
  {
    title: '所属地区',
    width: 120,
    align: 'center',
    dataIndex: 'country'
  },
  {
    title: '详细地址',
    width: 300,
    align: 'center',
    dataIndex: 'address'
  },
  {
    title: '电话',
    width: 200,
    align: 'center',
    dataIndex: 'tel'
  },
  {
    title: '二维码',
    dataIndex: 'qnurl',
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'qnurl' }
  },
  {
    title: '操作',
    dataIndex: '',
    width: 200,
    scopedSlots: { customRender: 'action' },
    fixed: 'right'
  }
]
export default {
  name: 'storeCode',
  data() {
    return {
      scollx: {
        x: '100%'
      },
      showAdd: false,
      columns: columns,
      formItemCol: 6,
      form: this.$form.createForm(this),
      queryParam: {
        groupCardNo: ''
      },
      previewUrl: '',
      showPreview: false,
      list: [],
      total: 0,
      brand: [
        {
          weid: 2738574294,
          name: 'JNBY'
        },
        {
          weid: 2822095692,
          name: 'less'
        },
        {
          weid: 2504948039,
          name: 'CROQUIS'
        },
        {
          weid: 4,
          name: 'jnby by JNBY'
        },
        {
          weid: 6924108367,
          name: 'Pomme de terre'
        },
        {
          weid: 15,
          name: 'APN73'
        },
        {
          weid: 8348044436,
          name: 'JNBYHOME'
        },
        {
          weid: 11,
          name: 'Outlet'
        },
        {
          weid: 5,
          name: '江南布衣+'
        }
      ],
      current: 1,
      size: 10,
      loading: false,
      deleteCode: '',
      showDelete: false,
      editInfo: null
    }
  },
  components: {
    addStore
  },
  watch: {
    size(n, o) {
      if (n !== o) {
        this.getList()
      }
    },
    current(n, o) {
      if (n !== o) {
        this.getList()
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async deleteStore() {
      const re = await deleteStore({ code: this.deleteCode })
      if (re.code == 200) {
        this.$message.success('删除成功')
        this.deleteCode = null
        this.showDelete = false
        this.getList()
      }
      console.log(this.deleteCode)
    },
    closeDetele() {
      this.deleteCode = null
      this.showDelete = false
    },
    async genCode(qrCodeId) {
      const re = await generateQrCode({ qrCodeId })
      if (re.code == 200) {
        this.getList()
      }
    },
    closeAdd(showAdd) {
      this.showAdd = false
      this.editInfo = null
      if (showAdd) {
        this.getList()
      }
    },
    editAction(record) {
      this.editInfo = record
      this.showAdd = true
    },
    showTemp() {},
    showDeleteConfirm(code) {
      console.log(code)
      this.deleteCode = code
      this.showDelete = true
    },
    addStore() {
      this.showAdd = true
    },
    onChange(e) {},
    onShowSizeChange(current, size) {},
    paginationChange(current, size) {},
    preview(url) {
      this.previewUrl = url
      this.showPreview = true
    },
    colsePreview() {
      this.previewUrl = ''
      this.showPreview = false
    },
    async getList() {
      this.loading = true
      const obj = this.form.getFieldsValue()
      const { current, size } = this
      const re = await storeList({ current, size, ...obj })
      this.loading = false
      if (re.code == 200) {
        this.list = re.data.records
        this.total = re.data.total
      }
    },
    async submit() {
      this.current = 1
      this.getList()
    },
    reset() {
      this.form.resetFields()
      this.getList()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    handleSelectChange(value) {
      this.form.setFieldsValue({
        note: `${value}`
      })
    }
  }
}
</script>
<style scoped>
.btn-group {
  display: flex;
  justify-content: flex-end;
}
.qrcode {
  width: 30px;
  height: 30px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.preview-img {
  width: 300px;
  height: 300px;
  margin: auto;
}
.ml-10 {
  margin-left: 10px;
}
</style>
